<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.css">
    <link rel="stylesheet" href="./static/css/me.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.5.0/dist/semantic.min.js"></script>
</head>
<body>
    <!-- 导航 -->
    <nav class="ui inverted segment m-padded-tb-mini">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu ">
                <h2 class="ui teal header item">Blog</h2>
                <a href="#" class="m-item item m-mobile-hide "><i class=" home icon"></i>首页</a>
                <a href="#" class="m-item item m-mobile-hide "><i class=" idea icon"></i>分类</a>
                <a href="#" class="m-item item m-mobile-hide "><i class=" tags icon"></i>标签</a>
                <a href="#" class="m-item item m-mobile-hide "><i class=" clone icon"></i>归档</a>
                <a href="#" class="m-item item m-mobile-hide "><i class=" info icon"></i>关于我</a>
                <div class="right m-item item m-mobile-hide ">
                    <div class="ui icon transparent input">
                        <input type="text" name="" id="" placeholder="Search...">
                        <i class="search link inverted icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show">
                <i class="sidebar icon"></i>
            </a>
        </div>
    </nav>

    <!-- 中间内容 content -->
    <div class="m-container-small m-padded-tb-big">
        <div class="ui container">
            <!-- 知识点：样式中的top和bottom组合成一个块，上下有圆角 -->
            <!-- 头部 -->
            <div class="ui top attached segment">
                <div class="ui horizontal link list">
                    <div class="item">
                        <img src="https://picsum.photos/100/100" alt="" class="ui avatar image">
                        <div class="content">
                            <a class="header">李盈盈</a>
                        </div>
                    </div>
                    <div class="item">
                        <i class="calender icon"></i>2023-2-22
                    </div>
                    <div class="item">
                        <i class="eye icon"></i>2450
                    </div>
                </div>
            </div>
            <div class="ui  attached segment">
                 <!-- 图片 -->
                 <img src="https://picsum.photos/1200/600" alt="" class="ui fluid rounded image">
            </div>
            <div class="ui  attached segment">
                <!-- 内容 -->
                <div class="ui right aligned basic segment .m-margin-th-tiny">
                    <div class="ui orange basic label">原创</div>
                </div>
                <h2 class="ui center aligned header">使用spring创建个人博客</h2>
                <div id="content" class="m-padded-lr-responsive m-padded-tb-large">
                    <p>1.1&nbsp;前言<br>
                        曾几何时，浏览着别人一个个好好看的个人博客的时候，也憧憬着要是有一个属于自己的个人博客网站就好了。</p>
                        
                        <p>随着技术的提升自己也想用Spring&nbsp;boot&nbsp;搭建一个属于自己的博客系统，刚好前段时间学习了李仁密大神的小而美个人博客项目课受益匪浅。于是琢磨着搭建一款属于自己的博客网站一定非常棒。</p>
                        
                        <p>于是参考了oneStar博主的博客项目，乘热打铁巩固所学习的内容，好让自己熟悉这类项目开发的基本流程。于是有了下面这款&quot;清峰小栈&quot;个人博客项目。</p>
                        
                        <p>本SpringBoot个人博客项目已开源在我的Github上，感兴趣的可以去了解一下，制作不易可以给个star适当鼓励一下。</p>
                        <p>Semintic&nbsp;UI提供了一系列第三方组件和模板供我们使用，使我们可以更加方便、快捷的搭建出前端模板。<br>
                            themleaf模板引擎具有开箱即用的特性，是SpringBoot官方推荐的前端模板引擎。它可以完全替代&nbsp;JSP，可以直接套用模板实现JSTL、&nbsp;OGNL表达式效果，避免每天套模板、该jstl、改标签的困扰。<br>
                            同时在前端页面我引入了雪花动态效果可以很直观的看到细雪纷飞的景色，增强了前端页面的观赏性。<br>
                            在左下角我们可以发现一个动漫是的人物，也是引入的一个第三方插件，叫Live2D看板娘，是一个比较经典的博客互动模型，支持换装，换人物，信息互动等功能。也可自定义功能。集成也非常简单网上一找一大堆。<br>
                            </p>
                            <p>五、SprongBoot后台管理界面介绍<br>
                                1.0&nbsp;后台日志类和自定义异常类功能实现<br>
                                最先开始的代码准备工作是我们的日志类编写，项目运行过程中出现的一些问题bug都会以日志的方式被记录下来，供我们进行查看，能够让开发人员更容易的发现问题所在，极大程度上提高了工作效率。<br>
                                随后编写我们的异常处理类，当我们的程序出现异常时我们应该采取对应的措施。进行响应，使得我们的程序即使奔溃了也能够很友好的展示给用户。</p>
                                
                                <p>具体流程点击：《后台日志类和自定义异常类功能模块》</p>
                                
                                <p>1.1&nbsp;后台登录界面功能实现<br>
                                登录界面功能点比较简单，主要是对用户名密码进行校验，判断是否和数据库中已存入的用户名密码相匹配。主要功能点是对非管理员登录的所有路径进行统一拦截，以防非管理员用户在地址栏通过输入路径直接访问到后台的情况。<br>
                                同时也提供了注销功能，能够退出当前账号换号登录。</p>
                                
                                <p>具体流程点击：《后台登录功能模块》<br>
                                </p>
                </div>
                <!-- 标签 -->
                <!-- 为了后续做模板不要将标签写到文章板块里 -->
                <div class="m-padded-lr-responsive">
                     <div class="ui basic teal label">方法论</div>
                </div>
                <!-- 赞赏 -->
                <div class="ui  center aligned basic segment">
                    <button id="playButton" class="ui orange basic circular button">赞赏</button>
                </div> 
                <div class="ui flowing playQR popup  transition hidden">
                    <!-- popup -->
                    <div class="ui orange basic label">
                        <div class="ui images">
                            <div class="image" style="font-size: initial !important;">
                                <img src="./static/images/wx.jpg" alt="" class="ui rounded bordered image" style="width: 120px;">
                                <div>支付宝</div>
                            </div>
                            <div class="image" style="font-size: initial;">
                                <img src="./static/images/wx.jpg" alt="" class="ui rounded bordered image" style="width: 120px;">
                                <div>微信支付</div>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
           
            <div class="ui attached positive message">
            <!-- 博客信息 -->
            <div class="ui grid">
                <div class="eleven wide column">
                    <ul class="list">
                        <li>作者：李盈盈（联系作者：1545487878）</li>
                        <li>发布时间：</li>
                        <li>版权声明：</li>
                        <li>公众号展览：</li>
                    </ul>
                </div>
                <div class="five wide column">
                    <img src="./static/images/wx.jpg" alt="" class="ui right floated rounded bordered image" style="width: 110px;">
                </div>
            </div>
            </div>
            <div class="ui bottom  attached segment"></div>
            <!-- 留言区域列表 -->
             <div class="ui teal segment">
                <div class="ui small comments">
                    <h3 class="ui dividing header">Comments</h3>
                    <div class="comment">
                      <a class="avatar">
                        <img src="https://picsum.photos/100/100?image=1002">
                      </a>
                      <div class="content">
                        <a class="author">Matt</a>
                        <div class="metadata">
                          <span class="date">今天下午 5:42</span>
                        </div>
                        <div class="text">太赞了！ </div>
                        <div class="actions">
                          <a class="reply">回复</a>
                        </div>
                      </div>
                    </div>
                    <div class="comment">
                      <a class="avatar">
                        <img src="https://picsum.photos/100/100?image=1003">
                      </a>
                      <div class="content">
                        <a class="author">Elliot Fu</a>
                        <div class="metadata">
                          <span class="date">昨天上午12:30</span>
                        </div>
                        <div class="text">
                          <p>這對我的研究是非常有用.謝謝!</p>
                        </div>
                        <div class="actions">
                          <a class="reply">回复</a>
                        </div>
                      </div>
                      <div class="comments">
                        <div class="comment">
                          <a class="avatar">
                            <img src="https://picsum.photos/100/100?image=1004">
                          </a>
                          <div class="content">
                            <a class="author">Jenny Hess</a>
                            <div class="metadata">
                              <span class="date">刚刚</span>
                            </div>
                            <div class="text">艾略特你永远是多么正确 :) </div>
                            <div class="actions">
                              <a class="reply">回复</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="comment">
                      <a class="avatar">
                        <img src="https://picsum.photos/100/100?image=1005">
                      </a>
                      <div class="content">
                        <a class="author">Joe Henderson</a>
                        <div class="metadata">
                          <span class="date">5 天以前</span>
                        </div>
                        <div class="text">老兄，这太棒了。非常感谢。 </div>
                        <div class="actions">
                          <a class="reply">回复</a>
                        </div>
                      </div>
                    </div>
                    
                  </div>
             
                  <div class="ui form">
                    <div class="field">
                        <textarea name="content" placeholder="请输入评论信息.." id="" cols="30" rows="10"></textarea>
                    </div>
                    <div class="fields">
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text"  placeholder="姓名">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="email"  placeholder="邮箱">
                            </div>                
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button class="ui m-mobile-wide teal button"><i class="edit icon"></i>发送</button>
                    </div>
                 </div>
                </div>   </div>
             
        </div>
    </div>
<br>
<br>
<br>
    <!-- 底部footer -->
    <footer class="ui inverted vertical segment m-padded-tb-massive">
        <div class="ui center aligned container">
            <div class="ui divided inverted stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="./static/images/1.jpg" alt="" class="ui rounded image" style="width: 110px;">

                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="m-opactiy-mini m-text-thin ui inverted header">最新新闻</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事{User Story}</a>
                        <a href="#" class="item">用户故事{User Story}</a>
                        <a href="#" class="item">用户故事{User Story}</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="m-opactiy-mini m-text-thin ui inverted header">最新新闻</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事{User Story}</a>
                        <a href="#" class="item">用户故事{User Story}</a>
                        <a href="#" class="item">用户故事{User Story}</a>
                    </div>   
                </div>
                <div class="seven wide column">
                    <h4 class="m-opactiy-mini m-text-thin ui inverted header">最新新闻</h4>
                    <p class="m-opactiy-mini">山行野宿，孤身万里 ...</p>
                </div>
            </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-spaced .m-opacity-tiny m-text-thin">---------这世间本就是各人下雪，各有各的隐晦皎洁---------</p>
        </div>
    </footer>
    
    <script>
        $('.menu.toggle').click(function(){
            $('.m-item').toggleClass('m-mobile-hide');
        });
       
        // 弹出层
        $('#playButton').popup({
            popup:$('.playQR.popup'),
            on:'click',
            position:'bottom center', 
        });
    </script>
</body>
</html>